<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>狙击枪</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		body{
			min-height:100vh;
			overflow: hidden;
		}
		section{
			position:relative;
			width: 100%;
			height: 100vh;
			background: url("../images/8.jpg");
			background-size: cover;
			background-position: center;
			cursor: url("../images/9.png"),pointer;
		}
		span{
			position: absolute;
			width: 40px;
			height: 38px;
			background: url("../images/10.png");
			pointer-events: none;
			transform: translate(20px,20px);
		}
	</style>
</head>

<body>
	<section>
		<audio src="../images/98k.mp3" id="audio" autostart='false'></audio>
	</section>
	<script>
		document.addEventListener('click', (e) =>{
			let body=document.querySelector('body')
			let bullet=document.createElement('span')
			let x=e.offsetX
			let y=e.offsetY
			
			bullet.style.left=x +'px'
			bullet.style.top=y +'px'
			body.appendChild(bullet)
			
			let audio=document.getElementById('audio')
			audio.play()
		})
	</script>
</body>
</html>
